import 'package:dali_ng_pera/page/widget/dnp_classic_header.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import '../widget/dnp_lifecycle_widget.dart';
import 'dnp_profile_controller.dart';
import 'dnp_profile_entity.dart';

class DnpProfileTabPage extends StatefulWidget {

  DnpProfileTabPage({super.key});

  @override
  State<DnpProfileTabPage> createState() => _DnpProfileTabPageState();
}

class _DnpProfileTabPageState extends State<DnpProfileTabPage> {
  final controller = Get.put(DnpProfileController());

  @override
  void initState() {
    super.initState();
    controller.ctx = context;
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    Get.delete<DnpProfileController>();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DnpLifecycleWidget(
        ctx: context,
        subWidget: Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/ic_default_main_bg.webp'),
                  fit: BoxFit.fill,
                ),
              ),
            ),
            _contentWidget()
          ],
        ),
        show: (){
          controller.requestData();
        },
      ),
    );
  }

  Widget _contentWidget() {
    return SafeArea(
      child: SmartRefresher(
        header: DnpClassicHeader(),
        controller: controller.refreshController,
        onRefresh: () => controller.requestData(),
        child: Padding(
          padding: const EdgeInsets.only(left: 14,right: 14),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 20),
              Container(
                height: 200,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/ic_profile_bg.webp'),
                    fit: BoxFit.fill,
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(top: 100),
                  child: Row(
                    children: [
                      SizedBox(width: 14),
                      Image.asset(
                        'assets/images/ic_profile_avatar.webp',
                        width: 71,
                        height: 71,
                      ),
                      SizedBox(width: 14),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          GetBuilder<DnpProfileController>(builder: (controller){
                            return Text(
                              controller.profileEntity?.userInfo?.userphone ?? "",
                              style: TextStyle(
                                fontSize: 20,
                                fontWeight: FontWeight.w500,
                                color: Color(0xFF252630),
                              ),
                            );
                          }),
                          SizedBox(height: 9,),
                          Text(
                            'Welcome to Dali ng Pera',
                            style: TextStyle(
                              fontSize: 14,
                              color: Color(0xFF252630),
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
              ),
              SizedBox(height: 14),
              GetBuilder<DnpProfileController>(
                builder: (controller) {
                  return Visibility(
                    visible: controller.profileEntity != null && controller.profileEntity!.syllables?.length != 0,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'My Services',
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                            color: Color(0xFF252630),
                          ),
                        ),
                        SizedBox(height: 12),
                        _gridListWidget()
                      ],
                    ),
                  );
                },
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _gridListWidget() {
    return GridView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      padding: EdgeInsets.zero,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, // 每行显示的列数
        crossAxisSpacing: 14.0, // 列间距
        mainAxisSpacing: 13.0, // 行
        mainAxisExtent: 131
      ),
      itemCount: controller.profileEntity?.syllables?.length ?? 0, // 网格项的总数
      itemBuilder: (context, index) {
        DnpProfileSyllablesEntity entity = controller.profileEntity!.syllables![index];

        return GestureDetector(
          onTap: () => controller.clickAtIndex(index),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.white
            ),
            child: Column(
              children: [
                SizedBox(height: 20),
                SizedBox(
                  height: 43,
                  width: 43,
                  child: Image.network(
                    entity.sounds ?? "",
                    errorBuilder: (context, error, stackTrace) {
                      return Container();
                    },
                  ),
                ),
                SizedBox(height: 12,),
                Text(
                  entity.discernible ?? "",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 16,
                    color: Color(0xFF252630),
                  ),
                )
              ],
            ),
          ),
        );
      },
    );
  }
}